<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增的样式选择器</title>
</head>
<body>
    <div id="app">
        <div class="hd" data="hd"></div>
        <span></span>
        <div class="hdms hd"></div>
    </div>
    <script>
        // 样式选择器是静态的，动态添加元素，获取不到
        // setTimeout(() => {
        //     document.body.querySelector('#app').insertAdjacentHTML('beforeend',`<div class="hd"></div>`);
        // },2000);
        // console.log(document.body.querySelectorAll('.hd'));

        console.log(document.body.querySelector('#app'));

        // 获取app里面所有的div
        console.log(document.body.querySelectorAll('#app div'));

        // 获取app里面data为hd的div
        console.log(document.body.querySelectorAll('#app div[data="hd"]'));

        // 获取app里面第一个子元素
        console.log(document.body.querySelectorAll('#app :first-child'));

        // 获取app里面最后一个子元素
        console.log(document.body.querySelectorAll('#app :last-child'));

        // 获取app里面第一个span
        console.log(document.body.querySelectorAll('#app span:first-of-type'));

        // 获取app里面第二个div
        console.log(document.body.querySelectorAll('#app div:nth-of-type(2)'));

        // 获取app里面第一个span的下一个元素
        console.log(document.body.querySelectorAll('#app span:first-of-type+div'));
    </script>
</body>
</html>